<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .img{
            margin: 50px auto;
            width: 80%;
            height: 200px;
        }
        .img img{
            width: 100%;
            height: 100%;
        }
        .container {
            width: 80%;
            margin: 50px auto;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 15px;
            text-align: center;
        }
        th {
            background-color: #f8f8f8;
            font-weight: bold;
        }
        td img {
            width: 50px;
            height: 50px;
        }
        .quantity {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .quantity button {
            padding: 5px 10px;
            margin: 0 5px;
            cursor: pointer;
        }
        .total {
            text-align: right;
            padding: 20px;
            font-size: 18px;
            color: #e74c3c;
        }
        .active{
            background-color: #f8f8f8;
        }
        .total span {
            font-weight: bold;
        }
        .checkout {
            text-align: right;
            padding: 20px;
        }
        .checkout button {
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        .checkout button:hover {
            background-color: #2980b9;
        }
        .floter{
            background-color: #f8f8f8;
            color:grey;
            width: 100%;   
            height: 100px;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
        }
        .rtal{
            float: left;
            padding: 20px;
            padding-left: 50px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="img">
        <img src="OIP-C.jpg" alt="购物车">
    </div>
    
    <div class="container" id="app">
        <table>
            <thead>
                <tr>
                    <th>选中</th>
                    <th>名称</th>
                    <th>图片</th>
                    <th>单价</th>
                    <th>个数</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody v-if="fruitList.length>0">
                <tr v-for="(item,index) in fruitList" :key="item.id" :class="{active:item.ischecked}">
                    <td><input type="checkbox" v-model="item.ischecked"></td>
                    <td>{{item.name}}</td>
                    <td><img :src="item.icon" :alt="item.name" ></td>
                    <td>{{item.price}}</td>
                    <td class="quantity">
                        <button @click="sub(item.id)" :disabled="item.num<=1">-</button>
                        <span>{{item.num}}</span>
                        <button @click="add(item.id)">+</button>
                    </td>
                    <td>{{item.price*item.num}}</td>
                    <td><button @click="del(item.id)">删除</button></td>
                </tr>
            </tbody>
        </table>
        <div class="rtal" v-if="fruitList.length>0">
            <input type="checkbox" v-model="isAll" >全选
        </div>
        <div class="total" v-if="fruitList.length>0">
            总价：<span>¥ {{totalPrice}}</span>
        </div>
        <div class="checkout" v-if="fruitList.length>0">
            <button>结算({{totalCount}})</button>
        </div>
      <div class="floter" v-if="fruitList.length==0">
        空空如也
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const defaultFruitList = [
                    {
                        id:1,
                        icon:"./1.jpg",
                        name:"橘子",
                        num:2,
                        ischecked:true,
                        price:5,
                    },
                    {
                        id:2,
                        icon:"./2.jpg",
                        name:"桃子",
                        num:1,
                        ischecked:false,
                        price:6,
                    },
                    {
                        id:3,
                        icon:"./3.jpg",
                        name:"梨",
                        num:3,
                        ischecked:true,
                        price:4,
                    },
                    {
                        id:4,
                        icon:"./4.jpg",
                        name:"西瓜",
                        num:3,
                        ischecked:false,
                        price:6,
                    },
                    
                ]
        var app = new Vue({
            el: '#app',
            data: {
                fruitList:JSON.parse(localStorage.getItem('fruitList')) ||defaultFruitList,
            },
            methods:{
                del(id){
                    this.fruitList = this.fruitList.filter(item=> item.id !== id)
                },
                add(id){
                    this.fruitList.forEach(item=>{
                        if(item.id == id){
                            item.num++
                        }
                    })
                },
                sub(id){
                    this.fruitList.forEach(item=>{
                        if(item.id == id){
                            item.num--
                        }
                    })
                },
            },
            computed:{
                isAll:{
                    get(){
                        return this.fruitList.every(item=>item.ischecked)
                    },
                    set(val){
                        this.fruitList.forEach(item=>{
                            item.ischecked = val
                        })
                    }
                },
                //总数量
                totalCount(){
                        return this.fruitList.reduce((sum,item)=>{
                            if(!item.ischecked) return sum
                            return sum + item.num
                        },0)
                    },
                    //总价钱
                    totalPrice(){
                        return this.fruitList.reduce((sum,item)=>{
                            if(!item.ischecked) return sum
                            return sum + item.num * item.price
                        },0)
                    }
            },
            watch:{
                fruitList:{
                    handler(newValue){
                        localStorage.setItem('fruitList',JSON.stringify(newValue))
                    },
                    deep:true
                }
            },

        })
    </script>
</body>
</html>